---
layout: single
property_name: transform
---

<section id="transform" class="property">
  <header class="property-header">
    <nav class="property-links">
      <a class="property-links-direct" href="{{site.url}}/property/transform/" data-property-name="transform" data-tooltip="Single page for this property">Permalink</a>
      <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="transform">Share</a>
        <a target="_blank" href="http://caniuse.com/#feat=transforms3d" data-tooltip="See on Can I use..." rel="external">Can I use</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/transform" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="property-name">
      <a href="#transform"><span>#</span>transform</a>
    </h2>
    <div class="property-description">
      <p>Defines how the element is transformed.</p>

    </div>

  </header>

    <style type="text/css">.transform { display: flex; }</style>


    <style type="text/css">.transform .natural { height: 75px;position: absolute;width: 75px; }.transform .actual { height: 75px;position: relative;width: 75px; }</style>


    <section class="example">
      <header class="example-header">
        <p class="example-name">
            <code class="example-default" data-tooltip="This is the property's default value">default</code>


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="transform: none;">transform: none;</code>
        </p>
        <div class="example-description">
          <p>Removes any transformation.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div transform " id="transform-none"><p class="natural">Natural position</p><p class="actual"></p></div>
        </div>
      </aside>
        <style type="text/css">#transform-none .actual:before { content: "no transform"; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="transform: translateX(40px);">transform: translateX(40px);</code>
        </p>
        <div class="example-description">
          <p>Move the element on the <strong>horizontal</strong> axis.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div transform " id="transform-translatex40px"><p class="natural">Natural position</p><p class="actual"></p></div>
        </div>
      </aside>
        <style type="text/css">#transform-translatex40px .actual { transform: translateX(40px); }#transform-translatex40px .actual:before { content: "translateX"; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="transform: translateY(20px);">transform: translateY(20px);</code>
        </p>
        <div class="example-description">
          <p>Move the element on the <strong>vertical</strong> axis.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div transform " id="transform-translatey20px"><p class="natural">Natural position</p><p class="actual"></p></div>
        </div>
      </aside>
        <style type="text/css">#transform-translatey20px .actual { transform: translateY(20px); }#transform-translatey20px .actual:before { content: "translateY"; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="transform: translateY(100%);">transform: translateY(100%);</code>
        </p>
        <div class="example-description">
          <p>You can use <strong>percentage</strong> values: the percentage is relative to the <strong>element itself</strong>, and not the parent.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div transform " id="transform-translatey100"><p class="natural">Natural position</p><p class="actual"></p></div>
        </div>
      </aside>
        <style type="text/css">#transform-translatey100 .actual { transform: translateY(100%); }#transform-translatey100 .actual:before { content: "translateY"; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="transform: translate(20px, -10%);">transform: translate(20px, -10%);</code>
        </p>
        <div class="example-description">
          <p>You can use <code>translate()</code> with <strong>two values</strong>:</p>
<ul><li>the first value is for the <strong>horizontal</strong> axis</li><li>the second value is for the <strong>vertical</strong> axis</li></ul>
        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div transform " id="transform-translate20px--10"><p class="natural">Natural position</p><p class="actual"></p></div>
        </div>
      </aside>
        <style type="text/css">#transform-translate20px--10 .actual { transform: translate(20px, -10%); }#transform-translate20px--10 .actual:before { content: "translate"; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="transform: scaleX(1.5);">transform: scaleX(1.5);</code>
        </p>
        <div class="example-description">
          <p>Scale the element on the <strong>horizontal</strong> axis.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div transform " id="transform-scalex15"><p class="natural">Natural position</p><p class="actual"></p></div>
        </div>
      </aside>
        <style type="text/css">#transform-scalex15 .actual { transform: scaleX(1.5); }#transform-scalex15 .actual:before { content: "scaleX"; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="transform: scaleY(0.4);">transform: scaleY(0.4);</code>
        </p>
        <div class="example-description">
          <p>Scale the element on the <strong>vertical</strong> axis.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div transform " id="transform-scaley04"><p class="natural">Natural position</p><p class="actual"></p></div>
        </div>
      </aside>
        <style type="text/css">#transform-scaley04 .actual { transform: scaleY(0.4); }#transform-scaley04 .actual:before { content: "scaleY"; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="transform: scaleY(-2);">transform: scaleY(-2);</code>
        </p>
        <div class="example-description">
          <p>You can use <strong>negative</strong> values: it will invert the element.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div transform " id="transform-scaley-2"><p class="natural">Natural position</p><p class="actual"></p></div>
        </div>
      </aside>
        <style type="text/css">#transform-scaley-2 .actual { transform: scaleY(-2); }#transform-scaley-2 .actual:before { content: "scaleY"; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="transform: scale(0.8, 0.8);">transform: scale(0.8, 0.8);</code>
        </p>
        <div class="example-description">
          <p>You can use <code>scale()</code> with <strong>two values</strong>:</p>
<ul><li>the first value is for the <strong>horizontal</strong> axis</li><li>the second value is for the <strong>vertical</strong> axis</li></ul><p>By using the same value for both, you can <strong>scale proportionally</strong>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div transform " id="transform-scale08-08"><p class="natural">Natural position</p><p class="actual"></p></div>
        </div>
      </aside>
        <style type="text/css">#transform-scale08-08 .actual { transform: scale(0.8, 0.8); }#transform-scale08-08 .actual:before { content: "scale"; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="transform: rotate(45deg);">transform: rotate(45deg);</code>
        </p>
        <div class="example-description">
          <p>Rotate the element.</p>
<p>You can use:</p>
<ul><li><strong>degrees</strong> from <code>0</code> to <code>360deg</code></li><li><strong>gradians</strong> from <code>0</code> to <code>400grad</code></li><li><strong>radians</strong> from <code>0</code> to <code>2πrad</code></li><li><strong>turns</strong> from <code>0</code> to <code>1turn</code></li></ul>
        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div transform " id="transform-rotate45deg"><p class="natural">Natural position</p><p class="actual"></p></div>
        </div>
      </aside>
        <style type="text/css">#transform-rotate45deg .actual { transform: rotate(45deg); }#transform-rotate45deg .actual:before { content: "rotate"; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="transform: skewX(15deg);">transform: skewX(15deg);</code>
        </p>
        <div class="example-description">
          <p>Skew the element on the <strong>horizontal</strong> axis.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div transform " id="transform-skewx15deg"><p class="natural">Natural position</p><p class="actual"></p></div>
        </div>
      </aside>
        <style type="text/css">#transform-skewx15deg .actual { transform: skewX(15deg); }#transform-skewx15deg .actual:before { content: "skewX"; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="transform: skewY(45deg);">transform: skewY(45deg);</code>
        </p>
        <div class="example-description">
          <p>Skew the element on the <strong>vertical</strong> axis.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div transform " id="transform-skewy45deg"><p class="natural">Natural position</p><p class="actual"></p></div>
        </div>
      </aside>
        <style type="text/css">#transform-skewy45deg .actual { transform: skewY(45deg); }#transform-skewy45deg .actual:before { content: "skewY"; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="transform: skew(10deg, -20deg);">transform: skew(10deg, -20deg);</code>
        </p>
        <div class="example-description">
          <p>You can use <code>skew()</code> with <strong>two values</strong>:</p>
<ul><li>the first value is for the <strong>horizontal</strong> axis</li><li>the second value is for the <strong>vertical</strong> axis</li></ul>
        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div transform " id="transform-skew10deg--20deg"><p class="natural">Natural position</p><p class="actual"></p></div>
        </div>
      </aside>
        <style type="text/css">#transform-skew10deg--20deg .actual { transform: skew(10deg, -20deg); }#transform-skew10deg--20deg .actual:before { content: "skew"; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="transform: rotate(5deg) scale(1.1, 1.1) translate(-20%, 30px);">transform: rotate(5deg) scale(1.1, 1.1) translate(-20%, 30px);</code>
        </p>
        <div class="example-description">
          <p>You can combine <strong>multiple</strong> transformations by separating them with a space.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div transform " id="transform-rotate5deg-scale11-11-translate-20-30px"><p class="natural">Natural position</p><p class="actual"></p></div>
        </div>
      </aside>
        <style type="text/css">#transform-rotate5deg-scale11-11-translate-20-30px .actual { transform: rotate(5deg) scale(1.1, 1.1) translate(-20%, 30px); }#transform-rotate5deg-scale11-11-translate-20-30px .actual:before { content: "multi"; }</style>
    </section>

    <footer class="example-complements">
      <strong>Other options include</strong>:<br><code class="shorthand"><a href="https://developer.mozilla.org/en/docs/Web/CSS/transform#matrix()" target="_blank">matrix()</a></code> <code class="shorthand"><a href="https://developer.mozilla.org/en/docs/Web/CSS/transform#matrix3d()" target="_blank">matrix3d()</a></code> <code class="shorthand"><a href="https://developer.mozilla.org/en/docs/Web/CSS/transform#translateZ()" target="_blank">translateZ()</a></code> <code class="shorthand"><a href="https://developer.mozilla.org/en/docs/Web/CSS/transform#translate3d()" target="_blank">translate3d()</a></code> <code class="shorthand"><a href="https://developer.mozilla.org/en/docs/Web/CSS/transform#scaleZ()" target="_blank">scaleZ()</a></code> <code class="shorthand"><a href="https://developer.mozilla.org/en/docs/Web/CSS/transform#scale3d()" target="_blank">scale3d()</a></code> <code class="shorthand"><a href="https://developer.mozilla.org/en/docs/Web/CSS/transform#rotateX()" target="_blank">rotateX()</a></code> <code class="shorthand"><a href="https://developer.mozilla.org/en/docs/Web/CSS/transform#rotateY()" target="_blank">rotateY()</a></code> <code class="shorthand"><a href="https://developer.mozilla.org/en/docs/Web/CSS/transform#rotateZ()" target="_blank">rotateZ()</a></code> <code class="shorthand"><a href="https://developer.mozilla.org/en/docs/Web/CSS/transform#rotate3d()" target="_blank">rotate3d()</a></code>  and  <code class="shorthand"><a href="https://developer.mozilla.org/en/docs/Web/CSS/transform#perspective()" target="_blank">perspective()</a></code>.
    </footer>
</section>
